import defaultSettings from '@/settings'
import Cookies from 'js-cookie'
const themetKey = 'themeColor'
// navBar模块
const { showSettings, fixedHeader, sidebarLogo, theme } = defaultSettings

const state = {
  showSettings: showSettings,
  fixedHeader: fixedHeader,
  sidebarLogo: sidebarLogo,
  // 默认主题色
  // theme: theme
  // 优先从本地去 主题色 取不到 再用 默认色
  theme: Cookies.get(themetKey) || theme
}

const mutations = {
  // 为了 提高复用性, 传递数据的时候有一个规则 必须是一个对象 {key: xx,value: xxx}
  CHANGE_SETTING: (state, { key, value }) => {
    // 只改 state中存的属性
    // eslint-disable-next-line no-prototype-builtins
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }
    // 设置完颜色后 同步到本地
    if (key === 'theme') {
      Cookies.set(themetKey, value)
    }
  },
  // 重置主题色
  removeTheme(state) {
    // 1. 将本地的主题色设置为 默认色
    Cookies.set(themetKey, theme) // theme是第五行解构出来的变量
    // 2. 移除vuex中存储的主题色 设置为默认色
    state.theme = theme
  }
  // 自己定义的修改theme颜色的mutation
  // changeColor(state, val) {
  //   state.theme = val
  // }
}

const actions = {
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

